<template>
    <div class="header">
        <div class="login">
            <a v-if="login" href="#">欢迎 {{ userName }}</a>
            <a v-if="!login" href="javascript:;" @click="goToLogin">欢迎，请 登录</a>
            <span> | </span>
            <a v-if="!login" href="javascript:;" @click="goToLogin">免费注册</a>
        </div>
        <div class="navigate">
            <ul>
                <router-link to="/home" active-class="activePage" tag="li"><a href="#">首页</a></router-link>
                <li><a href="#" @click="drawer = true"><i class="el-icon-goods"></i> 购物车</a></li>
                <router-link to="/seller" active-class="activePage" tag="li"><a href="#">我的店铺</a></router-link>
                <router-link to="/userManager" active-class="activePage" tag="li"><a href="#">用户管理</a></router-link>
            </ul>
        </div>
        <el-drawer
            title="🛒 我的购物车"
            :visible.sync="drawer"
            direction="rtl"
        >
         <div v-if="isLogin" class="emptyCart">
            <span>请先登录</span>
            <a href="javascript:;" @click="goToLogin">马 上 登 录</a>           
        </div>
        <div v-else-if="isCartEmpty" class="emptyCart">
            <div class="cartIcon"><i class="el-icon-goods"></i></div>
            <span>Your cart is empty.</span>
            <a href="/MoreGoods/new">马 上 加 购</a>           
        </div>
        <div v-else class="emptyCart">
            购物车的东西        
        </div>
        </el-drawer>

    </div>
</template>

<script>
export default {
    data() {
        return{
            drawer:false,
            isCartEmpty:false,
            isLogin:false,
            goodList:[]
        } 
    },
    props: {
        login: {
            type: Boolean,
            default: false,          
        },
        active:{
            type:Number,
            default:1
        }
    },
    methods: {
        goToLogin(){
            this.drawer = false
            this.active = 0
            this.$router.push({
                name:'Login'
            })
        },
    },
    created () {
        
    },
    watch:{
        drawer:{
            
        }
    }
}
</script>




<style lang="scss" scoped>
    .header{
        width: 100%;
        height: 40px;
        background: rgb(61, 61, 61);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .login{
            a{
                display: inline-block;
                color: red;
                text-decoration: none;
            }
        }
        .navigate{
            ul{
                display: flex;
                list-style: none;
                li{
                    text-align: center;
                    line-height: 40px;
                    height: 40px;
                    width: 150px;
                    padding: 0 10px;
                   
                    a{
                        display: inline-block;
                        height: 39px;
                        width: 85px;
                        text-decoration: none;
                        color: rgb(177, 175, 171);
                        transition: .5s;
                    }
                }
                li:hover a{
                    color: #fff;
                }
            }
            
        }
    }
    .emptyCart{
        margin:50px auto;
        .cartIcon{
            width: 100%;
            display: flex;       
            justify-content: center;
            i
            {
            font-size: 200px;
            }
        }
        span{
            display: block;
            text-align: center;
        }
        a{
            display: block;
            width: 180px;
            height: 40px;
            background: rgb(239, 62, 9);
            color: #fff;
            font-weight: 700;
            font-size: 18px;         
            text-align: center;
            line-height: 40px;
            margin: 20px auto;
            border-radius: 20px;
        }            
    }
    .activePage{
        a{
            color: #fff !important;
            border-bottom: 2px solid orange;
        }
        
    }
</style>